<template>
	<view class="store_attestation">
		<view class="line" :style="{width: '100%'}"></view>
		<view class="stepOne">
			<view class="title">实名认证</view>
			<text>实名认证后将不可修改，每个身份证号仅能认证一次</text>
			<i-formItem title="真实姓名">
				<input v-model="formData.certName" type="text" placeholder="请输入身份证上的姓名" />
			</i-formItem>
			<i-formItem title="身份证号码">
				<input v-model="formData.certId" type="text" placeholder="请输入身份证号码" />
			</i-formItem>
			<view class="buttons">
				<i-buttons color="#fff" size="32rpx" bgColor="#FB652E" radius="4" @click="save"
					padding="18rpx 0">提交</i-buttons>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		computed,
		reactive,
		ref,
		watch
	} from "vue";
	import {
		checkForm,
		showTost,
		navTo
	} from "../../utils/common";
	import {
		addUserAuth
	} from "../../api/user";
	import {
		idCardReg,
		nameReg,
	} from "../../utils/regs";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import useStore from '../../stores/index'

	const formData = reactive({
		mobile: '',
		smsCode: '',
		certId: '',
		certName: '',
		bankcardNum: '',
		phone: ''
	})

	const store = useStore()
	const type = ref('')

	onLoad((option) => {
		if (option.type) {
			type.value = option.type
		}
	})

	const save = async () => {
		const data = checkForm({ certId: formData.certId, certName: formData.certName }, [], { certName: { reg: nameReg, message: '请输入正确姓名' }, certId: { reg: idCardReg, message: '请输入正确身份证号' } })
		if (data) {
			return
		}
		await addUserAuth({ certId: formData.certId, certName: formData.certName })
		store.setUserInfo()
		showTost('实名认证成功', () => {
			navTo('', 'navigateBack')
		})
	}


</script>

<style lang="scss" scoped>
	.store_attestation {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;

		.line {
			height: 4rpx;
			background: #FB652E;
			transition: all 0.2s ease-out;
		}

		.stepOne {
			@include flexC;
			width: calc(100% - 48rpx);
			margin: 0 auto;
			margin-top: 36rpx;

			.title {
				@include titlefont(32rpx);
				margin-bottom: 16rpx
			}

			text {
				@include dfont(26rpx);
				color: #A0A0AD;
				margin-bottom: 40rpx;
			}

			.buttons {
				margin-top: 40rpx;
			}

			input {
				width: 70%;
			}
		}

	}
</style>